<template>
  <div style="margin-right: 10px">
    <!-- <el-card style="margin-bottom: 16px">
      <div slot="header">产品上新分析</div>

      <div
        style="margin-left: 2px; margin-right: 2px; height: 410px"
        ref="salesQuantity"
      ></div>

      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column
          prop="dataDateUnit"
          label="类别"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          v-for="(month, index) in months"
          :key="index"
          :prop="'salesData.' + index"
          :label="month"
          width="120"
          align="center"
        >
        </el-table-column>
      </el-table>
    </el-card> -->
    <el-card style="margin-bottom: 16px">
      <div slot="header">
        {{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }} 产品上新分析
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade? query.salesGrade: query.proBrandList + " " }}年度完成率</span
                    > -->
      </div>
      <barLine :echartDataSku="barLineChart" @vchartData="vchartData" />
      <!-- <tableList :tableDataList="barLineData" /> -->
      <el-table @cell-click="tableEditbarLineData" :data="barLineData" style="width: 100%" border>
        <el-table-column fixed prop="dataDateUnit" label="" width="100" align="center">
        </el-table-column>
        <el-table-column v-for="(month, index) in barLinemonths" :key="index" :prop="'salesData.' + index" :label="month"
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.dataDateUnit == '同比'">
              {{ scope.row.salesData[index] }}%
            </span>

            <span v-else>
              {{ scope.row.salesData[index] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card style="margin-bottom: 16px">
      <div slot="header">
        {{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }} 产品品类上新分析
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade? query.salesGrade: query.proBrandList + " " }}年度完成率</span
                    > -->
      </div>
      <el-row :gutter="20">
        <el-col :span="13" :xs="24">
          <barLine :echartDataSku="categoryNewCountYoyChart" @vchartData="categoryData" />
        </el-col>
        <el-col :span="11" :xs="24">
          <!-- <tableList :tableDataList="categoryNewCountYoyList" -->
          <el-table @cell-click="tableEditcategoryData" :data="tableData" style="width: 100%" border>
            <el-table-column fixed prop="dataDateUnit" label="" width="100" align="center">
            </el-table-column>
            <el-table-column v-for="(month, index) in months" :key="index" :prop="'salesData.' + index" :label="month"
              align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.dataDateUnit == '同比'">
                  {{ scope.row.salesData[index] }}%
                </span>

                <span v-else>
                  {{ scope.row.salesData[index] }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-bottom: 16px">
      <div slot="header">
        {{ query.salesGrade ? query.salesGrade : query.proBrandList + " " }} 新品层级分布
        <!-- <span
                      ><i class="el-icon-collection"></i>
                      {{ query.salesGrade? query.salesGrade: query.proBrandList + " " }}年度完成率</span
                    > -->
      </div>
      <el-row :gutter="20">
        <el-col :span="16" :xs="24">
          <barLine :echartDataSku="operationLevelNewCountYoyChart" @vchartData="operationLevelData" />
        </el-col>
        <el-col :span="8" :xs="24">
          <el-table @cell-click="tableEditoperationLevel" :data="operationLevelNewCountYoyList" style="width: 100%" border
            :height="350">
            <el-table-column prop="operationLevel" label="层级" width="125"></el-table-column>
            <el-table-column prop="newQuantity" label="" width="150">
              <template #header>
                <span style="white-space: normal;">
                  上新数量<br />{{ dataYear.dataYear }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="yoyNewQuantity" label="" width="150">
              <template #header>
                <span style="white-space: normal;">
                  上一年上新数量<br />{{ dataYear.lastdataYear }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="newQuantityYoy" label="同期比" width="100"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>

    <el-row :gutter="10">
      <el-col :span="12" :xs="24" v-for="(item, i) in xqpjTableData" :key="i">
        <el-card style="margin-bottom: 16px">
          <div slot="header">
            <span><i class="el-icon-collection"></i>
              {{ item.cpbm }}上新品类层级分布</span>
          </div>
          <barLine :echartDataSku="item.name" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加或修改样衣申请记录对话框 -->
    <el-dialog :visible.sync="open" width="80%" append-to-body v-if="open">
      <column :ProductList="ProductList" />
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from "echarts/lib/echarts.js";
import {
  productNewCountYoy,
  categoryNewCountYoy,
  operationLevelNewCountYoy,
  selectNewProductList
} from "@/api/productStructure/ItemNewTime";
import LineChart from "./components/LineChart";
import barLine from "./components/barLine";
import tableList from "./components/table";
import column from "./components/column";
export default {
  props: {
    query: {
      type: Object,
      default: () => { },
    },
    dataYear: {
      type: Object,
      default: () => { },
    },
  },
  components: {
    barLine,
    LineChart,
    tableList,
    column
  },
  data() {
    return {
      ProductList: [],
      open: false,
      tableData: [], // 用于存储转换后的数据
      months: [], // 用于存储所有月份

      operationLevelNewCountYoyChart: {},
      operationLevelNewCountYoyList: [],

      categoryNewCountYoyChart: {},
      categoryNewCountYoyList: [],
      //对比
      barLineChart: {},
      barLineData: [],
      barLinemonths: [],

      xqpjTableData: [],
    };
  },
  watch: {
    query: {
      handler: function (newnew, oldold) {
        // this.getselectCategorySaleTend("salesQuantity");
        this.getproductNewCountYoy();
        this.getcategoryNewCountYoy();
        this.getoperationLevelNewCountYoy();
        this.xqpjTableData = [];
        this.getDicts("sys_sale_category").then((res) => {
          console.log(JSON.stringify(res));
          const xsqs = res.data;
          for (let i = 0; i < xsqs.length; i++) {
            const xqpjTable = {};
            xqpjTable.index = i;
            xqpjTable.id = xsqs[i].dictValue;
            xqpjTable.cpbm = xsqs[i].dictLabel;
            xqpjTable.myd = "";
            xqpjTable.parent = "xsq";
            xqpjTable.remark = xsqs[i].remark;
            xqpjTable.name = {};
            xqpjTable.barData = [];
            xqpjTable.lineData = [];

            this.xqpjTableData.push(xqpjTable);
            // if (xqpjTable.cpbm !== "VOOOHOOO") {
            this.getselectProTypeList(xqpjTable.cpbm);
            // }
          }
        });
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.getList();
  },
  methods: {
    tableEditbarLineData(row, column, cell, event) {
      console.log(row);
      if (row.dataDateUnit == '同比') {
        return
      }
      // this.vchartData(column.label, '', row.dataDateUnit)
      const obj = {
        ...this.query,
        label: row.dataDateUnit,
        newTimeType: column.label
      }
      selectNewProductList(obj).then(
        (response) => {
          this.ProductList = response
          this.open = true
        }
      );
    },
    //点击的时间
    vchartData(inputValue, seriesName, dataDateUnit) {
      console.log(JSON.stringify(inputValue));
      console.log(JSON.stringify(seriesName));
      console.log(JSON.stringify(dataDateUnit));
      let label
      if (seriesName == '上一年上新数量') {
        label = '上一年'
      } else if (seriesName == '上新数量') {
        label = '本年'
      } else {
        return
      }
      const obj = {
        ...this.query,
        label: label ? label : dataDateUnit,
        newTimeType: inputValue
      }
      selectNewProductList(obj).then(
        (response) => {
          this.ProductList = response
          this.open = true
        }
      );
    },
    tableEditoperationLevel(row, column, cell, event) {
      console.log(column);
      this.operationLevelData(row.operationLevel, column.label)
    },
    //点击的时间
    operationLevelData(inputValue, seriesName) {
      console.log(JSON.stringify(inputValue));
      console.log(JSON.stringify(seriesName));
      let label
      if (seriesName == '上一年上新数量') {
        label = '上一年'
      } else if (seriesName == '上新数量') {
        label = '本年'
      } else {
        return
      }
      const obj = {
        ...this.query,
        label: label,
        operationLevel: inputValue
      }
      selectNewProductList(obj).then(
        (response) => {
          this.ProductList = response
          this.open = true
        }
      );
    },
    tableEditcategoryData(row, column, cell, event) {
      console.log(row);
      if (row.dataDateUnit == '同比') {
        return
      }
      // this.vchartData(column.label, '', row.dataDateUnit)
      const obj = {
        ...this.query,
        label: row.dataDateUnit,
        category: column.label
      }
      selectNewProductList(obj).then(
        (response) => {
          this.ProductList = response
          this.open = true
        }
      );
    },
    categoryData(inputValue, seriesName) {
      console.log(JSON.stringify(inputValue));
      console.log(JSON.stringify(seriesName));
      let label
      if (seriesName == '上一年上新数量') {
        label = '上一年'
      } else if (seriesName == '上新数量') {
        label = '本年'
      } else {
        return
      }
      const obj = {
        ...this.query,
        label: label,
        category: inputValue
      }
      selectNewProductList(obj).then(
        (response) => {
          this.ProductList = response
          this.open = true
        }
      );
    },
    getproductNewCountYoy() {
      productNewCountYoy(this.query).then((response) => {
        // this.categoryNewCountYoyList = response.categorySaleTendData;
        this.barLineData = []; // 用于存储转换后的数据
        this.barLinemonths = []; // 用于存储所有月份
        // 提取所有月份
        response.categorySaleTendData.forEach((item) => {
          for (const month in item.keywordProperty) {
            // const element = array[index];
            if (!this.barLinemonths.includes(month)) {
              this.barLinemonths.push(month);
            }
          }
        });
        console.log(JSON.stringify(this.barLinemonths));

        response.categorySaleTendData.forEach((item) => {
          const row = {
            dataDateUnit: item.dataDateUnit,
            salesData: [],
          };
          this.barLinemonths.forEach((month) => {
            row.salesData.push(item.keywordProperty[month] || 0);
          });
          this.barLineData.push(row);
        });

        // this.barLineData = response.categorySaleTendData;

        this.barLineChart = {
          columns: ["品类", "上新数量", "上一年上新数量", "同比"],
          rows: [],
        };

        response.itemNewTimeYoyList.forEach((item) => {
          this.barLineChart.rows.push({
            品类: item.month,
            上新数量: item.newQuantity,
            上一年上新数量: item.yoyNewQuantity,
            同比: item.newQuantityYoy ? item.newQuantityYoy : 0,
          });
        });
      });
    },
    getcategoryNewCountYoy() {
      categoryNewCountYoy(this.query).then((response) => {
        // this.categoryNewCountYoyList = response.categorySaleTendData;
        this.tableData = []; // 用于存储转换后的数据
        this.months = []; // 用于存储所有月份
        // 提取所有月份
        response.categorySaleTendData.forEach((item) => {
          for (const month in item.keywordProperty) {
            // const element = array[index];
            if (!this.months.includes(month)) {
              this.months.push(month);
            }
          }
        });
        console.log(JSON.stringify(this.months));

        response.categorySaleTendData.forEach((item) => {
          const row = {
            dataDateUnit: item.dataDateUnit,
            salesData: [],
          };
          this.months.forEach((month) => {
            row.salesData.push(item.keywordProperty[month] || 0);
          });
          this.tableData.push(row);
        });

        this.categoryNewCountYoyChart = {
          columns: ["品类", "上新数量", "上一年上新数量", "同比"],
          rows: [],
        };

        response.itemNewTimeYoyList.forEach((item) => {
          this.categoryNewCountYoyChart.rows.push({
            品类: item.category,
            上新数量: item.newQuantity,
            上一年上新数量: item.yoyNewQuantity,
            同比: item.newQuantityYoy ? item.newQuantityYoy : 0,
          });
        });
      });
    },
    getoperationLevelNewCountYoy() {
      operationLevelNewCountYoy(this.query).then((response) => {
        this.operationLevelNewCountYoyList = response;
        this.operationLevelNewCountYoyChart = {
          columns: ["品类", "上新数量", "上一年上新数量", "同比"],
          rows: [],
        };

        response.forEach((item) => {
          this.operationLevelNewCountYoyChart.rows.push({
            品类: item.operationLevel,
            上新数量: item.newQuantity,
            上一年上新数量: item.yoyNewQuantity,
            同比: item.newQuantityYoy ? item.newQuantityYoy : 0,
          });
        });
      });
    },
    getselectProTypeList(category) {
      operationLevelNewCountYoy({ category: category, ...this.query }).then(
        (response) => {
          let Year = new Date().getFullYear() + '年上新数量'
          let lastYear = (new Date().getFullYear() - 1) + '年上新数量'
          let obj = {
            columns: ["品类", Year, lastYear, "同比"],
            rows: [],
          };
          response.forEach((item) => {
            obj.rows.push({
              品类: item.operationLevel,
              [Year]: item.newQuantity,
              [lastYear]: item.yoyNewQuantity,
              同比: item.newQuantityYoy ? item.newQuantityYoy : 0,
            });
          });
          this.xqpjTableData.forEach((item) => {
            if (item.cpbm == category) {
              item.name = obj;
            }
          });
        }
      );
    },
    getselectCategorySaleTend(property) {
      selectCategorySaleTend(this.query).then((response) => {
        this.tableData = []; // 用于存储转换后的数据
        this.months = []; // 用于存储所有月份
        // 提取所有月份
        response.categorySaleTendData.forEach((item) => {
          for (const month in item.keywordProperty) {
            // const element = array[index];
            if (!this.months.includes(month)) {
              this.months.push(month);
            }
          }
        });
        console.log(JSON.stringify(this.months));

        response.categorySaleTendData.forEach((item) => {
          const row = {
            dataDateUnit: item.dataDateUnit,
            salesData: [],
          };
          this.months.forEach((month) => {
            row.salesData.push(item.keywordProperty[month] || 0);
          });
          this.tableData.push(row);
        });

        // return;

        let order = { date: [], data: [] };
        order.date = response.categorySaleStatisticsTend.map(
          (item) => item.dataDateUnit
        );
        response.categorySaleStatisticsTend.forEach((item) => {
          order.data.push(item.keywordProperty);
        });
        const xData = order.date;

        console.log(JSON.stringify(order.data));
        const keyArray = Object.keys(order.data[1]);
        const series = [];
        keyArray.forEach((key) => {
          series.push({
            name: key,
            data: order.data.map((item) => item[key]),
            type: "line",
          });
        });

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "2%",
            bottom: "10%",
          },
          // 提示框
          tooltip: { trigger: "axis" },
          xAxis: {
            data: xData,
          },
          yAxis: {},
          legend: {
            data: keyArray,
          },
          series,
        };

        const E = echarts.init(this.$refs[property]);

        E.setOption(option);
      });
    },
  },
};
</script>
